<template>
  <div class="app-container">
    <el-card class="page-container">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <el-button @click="handleGoBack" circle>
              <el-icon><ArrowLeft /></el-icon>
            </el-button>
            <h3>{{ currentTable?.comment || currentTable?.name }} - 表结构配置</h3>
          </div>
          <div class="header-right">
            <el-button type="primary" @click="handleAddField">
              <el-icon><Plus /></el-icon>
              新增字段
            </el-button>
            <el-button type="success" @click="handleSaveConfig">
              <el-icon><Check /></el-icon>
              保存配置
            </el-button>
          </div>
        </div>
      </template>

      <!-- 导航路径 -->
      <el-breadcrumb class="breadcrumb-container" separator="→">
        <el-breadcrumb-item
          v-for="(path, index) in navigationPath"
          :key="index"
          :class="{ 'is-current': index === navigationPath.length - 1 }"
        >
          <el-button
            v-if="index < navigationPath.length - 1"
            link
            type="primary"
            @click="handleNavigateBack(index)"
          >
            {{ path.tableName }} ({{ path.comment }})
          </el-button>
          <span v-else class="current-table">
            {{ path.tableName }} ({{ path.comment }})
          </span>
        </el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 字段列表 -->
      <el-table
        :data="currentTable?.fields || []"
        stripe
        border
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="name" label="字段名" width="150">
          <template #default="{ row }">
            <el-tag :type="row.isPrimary ? 'danger' : 'info'">
              {{ row.name }}
              <el-icon v-if="row.isPrimary" style="margin-left: 5px;">
                <Key />
              </el-icon>
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="type" label="字段类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getFieldTypeColor(row.type)">
              {{ row.type }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="长度" width="80" align="center">
          <template #default="{ row }">
            <span>{{ row.length || '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="必填" width="80" align="center">
          <template #default="{ row }">
            <el-icon :color="row.required ? '#67C23A' : '#C0C4CC'">
              <Check v-if="row.required" />
              <Close v-else />
            </el-icon>
          </template>
        </el-table-column>

        <el-table-column label="自增" width="80" align="center">
          <template #default="{ row }">
            <el-icon :color="row.autoIncrement ? '#67C23A' : '#C0C4CC'">
              <Check v-if="row.autoIncrement" />
              <Close v-else />
            </el-icon>
          </template>
        </el-table-column>

        <el-table-column prop="comment" label="字段注释" min-width="150" />

        <el-table-column label="关联关系" min-width="200">
          <template #default="{ row }">
            <div v-if="row.relation?.enabled" class="relation-info">
              <el-tag type="success" size="small">
                {{ row.relation.targetTableName }}.{{ row.relation.targetFieldName }}
              </el-tag>
              <el-tag type="info" size="small" style="margin-left: 5px;">
                {{ row.relation.type }}
              </el-tag>
            </div>
            <span v-else class="no-relation">-</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="300" fixed="right">
          <template #default="{ row }">
            <!-- 关联链接按钮 -->
            <el-button
              v-if="row.relation?.enabled"
              type="primary"
              size="small"
              @click="handleLinkToTable(row)"
            >
              <el-icon><Link /></el-icon>
              进入{{ row.relation.targetTableName }}
            </el-button>

            <el-button
              type="warning"
              size="small"
              @click="handleEditField(row)"
            >
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>

            <el-button
              type="info"
              size="small"
              @click="handleConfigRelation(row)"
            >
              <el-icon><Share /></el-icon>
              配置关联
            </el-button>

            <el-button
              type="danger"
              size="small"
              @click="handleDeleteField(row)"
            >
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 字段编辑对话框 -->
    <el-dialog
      v-model="fieldDialogVisible"
      :title="fieldDialogTitle"
      width="600px"
      :close-on-click-modal="false"
      class="field-dialog"
    >
      <el-form
        ref="fieldFormRef"
        :model="fieldForm"
        :rules="fieldFormRules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="字段名" prop="name">
              <el-input
                v-model="fieldForm.name"
                placeholder="请输入字段名"
                :disabled="isEditField"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字段类型" prop="type">
              <el-select v-model="fieldForm.type" placeholder="请选择字段类型" style="width: 100%">
                <el-option label="字符串" value="string" />
                <el-option label="数字" value="number" />
                <el-option label="布尔值" value="boolean" />
                <el-option label="日期" value="date" />
                <el-option label="日期时间" value="datetime" />
                <el-option label="长文本" value="text" />
                <el-option label="JSON" value="json" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="字段长度">
              <el-input-number
                v-model="fieldForm.length"
                :min="1"
                :max="65535"
                placeholder="字段长度"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="默认值">
              <el-input
                v-model="fieldForm.defaultValue"
                placeholder="默认值（可选）"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="字段注释" prop="comment">
          <el-input
            v-model="fieldForm.comment"
            placeholder="请输入字段注释"
          />
        </el-form-item>

        <el-form-item label="字段属性">
          <el-checkbox v-model="fieldForm.required">
            必填
          </el-checkbox>
          <el-checkbox v-model="fieldForm.isPrimary">
            主键
          </el-checkbox>
          <el-checkbox v-model="fieldForm.autoIncrement" :disabled="!fieldForm.isPrimary">
            自增
          </el-checkbox>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="fieldDialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="handleSubmitField">
          确定
        </el-button>
      </template>
    </el-dialog>

    <!-- 关联配置对话框 -->
    <el-dialog
      v-model="relationDialogVisible"
      title="配置字段关联"
      width="500px"
      :close-on-click-modal="false"
      class="relation-dialog"
    >
      <el-form
        ref="relationFormRef"
        :model="relationForm"
        label-width="100px"
      >
        <el-form-item label="启用关联">
          <el-switch v-model="relationForm.enabled" />
        </el-form-item>

        <template v-if="relationForm.enabled">
          <el-form-item label="关联表" prop="targetTableId">
            <el-select
              v-model="relationForm.targetTableId"
              placeholder="请选择关联表"
              style="width: 100%"
              @change="handleTargetTableChange"
            >
              <el-option
                v-for="table in availableTables"
                :key="table.id"
                :label="`${table.name} (${table.comment})`"
                :value="table.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="关联字段" prop="targetFieldId">
            <el-select
              v-model="relationForm.targetFieldId"
              placeholder="请选择关联字段"
              style="width: 100%"
              @change="handleTargetFieldChange"
            >
              <el-option
                v-for="field in targetTableFields"
                :key="field.id"
                :label="`${field.name} (${field.comment})`"
                :value="field.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="关联类型" prop="type">
            <el-select v-model="relationForm.type" placeholder="请选择关联类型" style="width: 100%">
              <el-option label="一对一" value="one-to-one" />
              <el-option label="一对多" value="one-to-many" />
              <el-option label="多对一" value="many-to-one" />
              <el-option label="多对多" value="many-to-many" />
            </el-select>
          </el-form-item>
        </template>
      </el-form>

      <template #footer>
        <el-button @click="relationDialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="handleSubmitRelation">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import type { DataTable, FieldRelation, TableField } from "../types"
import {
  ArrowLeft,
  Check,
  Close,
  Delete,
  Edit,
  Key,
  Link,
  Plus,
  Share
} from "@element-plus/icons-vue"
import { ElMessage, ElMessageBox } from "element-plus"
import { computed, nextTick, onMounted, reactive, ref, watch } from "vue"
import { useRoute, useRouter } from "vue-router"
import { databaseApi } from "@/common/apis"

const route = useRoute()
const router = useRouter()

// 响应式数据
const loading = ref(false)
const tables = ref<DataTable[]>([])
const currentTable = ref<DataTable>()
const fieldDialogVisible = ref(false)
const relationDialogVisible = ref(false)
const isEditField = ref(false)
const currentEditField = ref<TableField>()

// 导航路径（支持多级关联导航）
const navigationPath = ref<Array<{ tableId: string, tableName: string, comment: string }>>([])

// 字段表单
const fieldForm = reactive({
  id: "",
  name: "",
  type: "string" as any,
  length: undefined as number | undefined,
  required: false,
  isPrimary: false,
  autoIncrement: false,
  defaultValue: "",
  comment: ""
})

// 关联表单
const relationForm = reactive({
  enabled: false,
  targetTableId: "",
  targetTableName: "",
  targetFieldId: "",
  targetFieldName: "",
  type: "many-to-one" as any
})

// 表单验证规则
const fieldFormRules = {
  name: [
    { required: true, message: "请输入字段名", trigger: "blur" },
    { pattern: /^[a-z][a-z0-9_]*$/, message: "字段名必须以小写字母开头，只能包含小写字母、数字和下划线", trigger: "blur" }
  ],
  type: [
    { required: true, message: "请选择字段类型", trigger: "change" }
  ],
  comment: [
    { required: true, message: "请输入字段注释", trigger: "blur" }
  ]
}

// 表单引用
const fieldFormRef = ref()
const relationFormRef = ref()

// 计算属性
const fieldDialogTitle = computed(() => isEditField.value ? "编辑字段" : "新增字段")

const availableTables = computed(() => {
  return tables.value.filter(table => table.id !== currentTable.value?.id)
})

const targetTableFields = computed(() => {
  if (!relationForm.targetTableId) return []
  const targetTable = tables.value.find(table => table.id === relationForm.targetTableId)
  return targetTable?.fields || []
})

// 监听主键变化
watch(() => fieldForm.isPrimary, (isPrimary) => {
  if (!isPrimary) {
    fieldForm.autoIncrement = false
  }
})

// 方法
async function loadTables() {
  loading.value = true
  try {
    const response = await databaseApi.getImportedTables({
      current: 1,
      size: 1000 // 加载所有表
    })

    // 转换数据格式
    tables.value = response.data.records.map((dbTable: any) => ({
      id: dbTable.tableId?.toString() || dbTable.id?.toString() || "",
      name: dbTable.tableName || dbTable.name || "",
      comment: dbTable.tableComment || dbTable.comment || "",
      fields: [], // 先设为空数组，稍后加载详情
      createdAt: dbTable.createTime || dbTable.createdAt || "",
      updatedAt: dbTable.updateTime || dbTable.updatedAt || ""
    })) as DataTable[]

    console.log("已加载表数据:", tables.value.map(t => ({ id: t.id, name: t.name })))

    // 确保数据加载完成后再加载当前表
    await nextTick()
    await loadCurrentTable()
  } catch (error) {
    console.error("加载表数据失败:", error)
    ElMessage.error("加载表数据失败，请稍后重试")
    // 加载失败时跳转回表列表页
    router.push("/api-generator/tables")
  } finally {
    loading.value = false
  }
}

async function loadCurrentTable() {
  const tableId = route.params.tableId as string

  console.log("=== 调试信息 ===")
  console.log("请求的表ID:", tableId, "类型:", typeof tableId)
  console.log("可用的表列表:", tables.value.map(t => ({
    id: t.id,
    idType: typeof t.id,
    name: t.name,
    stringId: t.id.toString()
  })))

  // 检查 tableId 是否有效
  if (!tableId) {
    ElMessage.error("表ID参数缺失")
    router.push("/api-generator/tables")
    return
  }

  // 检查 tables 数据是否已加载
  if (tables.value.length === 0) {
    console.warn("表数据尚未加载，等待数据加载完成")
    return
  }

  // 支持字符串和数字类型的ID比较
  const table = tables.value.find((t) => {
    const match1 = t.id === tableId
    const match2 = t.id.toString() === tableId
    const match3 = String(t.id) === String(tableId)
    console.log(`比较表 ${t.name}: id=${t.id}, 严格匹配=${match1}, toString匹配=${match2}, String匹配=${match3}`)
    return match1 || match2 || match3
  })

  if (table) {
    currentTable.value = table

    // 初始化导航路径
    if (navigationPath.value.length === 0) {
      navigationPath.value = [{
        tableId: table.id,
        tableName: table.name,
        comment: table.comment
      }]
    }

    console.log(`✅ 成功加载表: ${table.name} (${table.comment})`)

    // 加载表详情（字段信息）
    await loadTableDetail(tableId)
  } else {
    console.error(`❌ 未找到表ID为 ${tableId} 的数据表`)
    ElMessage.error(`未找到指定的数据表 (ID: ${tableId})`)

    // 如果没有找到表，尝试跳转到第一个可用的表
    if (tables.value.length > 0) {
      const firstTable = tables.value[0]
      console.log(`🔄 尝试跳转到第一个表: ${firstTable.name} (ID: ${firstTable.id})`)
      router.push(`/api-generator/table-config/${firstTable.id}`)
    } else {
      router.push("/api-generator/tables")
    }
  }
}

async function loadTableDetail(tableId: string) {
  try {
    console.log(`📡 正在加载表字段信息: ${tableId}`)

    // 暂时使用基于表ID的mock字段数据
    // TODO: 后续需要后端提供基于表ID获取字段的接口
    if (currentTable.value) {
      console.log("📝 使用模拟字段数据")

      // 根据表名生成不同的字段结构
      const tableName = currentTable.value.name.toLowerCase()
      let fields = []

      if (tableName.includes("user")) {
        fields = [
          { id: "1", name: "id", type: "number", length: 20, required: true, isPrimary: true, autoIncrement: true, defaultValue: "", comment: "用户ID", relation: null },
          { id: "2", name: "username", type: "string", length: 50, required: true, isPrimary: false, autoIncrement: false, defaultValue: "", comment: "用户名", relation: null },
          { id: "3", name: "password", type: "string", length: 128, required: true, isPrimary: false, autoIncrement: false, defaultValue: "", comment: "密码", relation: null },
          { id: "4", name: "email", type: "string", length: 100, required: false, isPrimary: false, autoIncrement: false, defaultValue: "", comment: "邮箱", relation: null },
          { id: "5", name: "phone", type: "string", length: 20, required: false, isPrimary: false, autoIncrement: false, defaultValue: "", comment: "手机号", relation: null },
          { id: "6", name: "create_time", type: "datetime", length: null, required: false, isPrimary: false, autoIncrement: false, defaultValue: "CURRENT_TIMESTAMP", comment: "创建时间", relation: null }
        ]
      } else if (tableName.includes("role")) {
        fields = [
          { id: "1", name: "id", type: "number", length: 20, required: true, isPrimary: true, autoIncrement: true, defaultValue: "", comment: "角色ID", relation: null },
          { id: "2", name: "name", type: "string", length: 50, required: true, isPrimary: false, autoIncrement: false, defaultValue: "", comment: "角色名称", relation: null },
          { id: "3", name: "code", type: "string", length: 50, required: true, isPrimary: false, autoIncrement: false, defaultValue: "", comment: "角色编码", relation: null },
          { id: "4", name: "description", type: "string", length: 255, required: false, isPrimary: false, autoIncrement: false, defaultValue: "", comment: "角色描述", relation: null },
          { id: "5", name: "create_time", type: "datetime", length: null, required: false, isPrimary: false, autoIncrement: false, defaultValue: "CURRENT_TIMESTAMP", comment: "创建时间", relation: null }
        ]
      } else {
        // 默认字段结构
        fields = [
          { id: "1", name: "id", type: "number", length: 20, required: true, isPrimary: true, autoIncrement: true, defaultValue: "", comment: "主键ID", relation: null },
          { id: "2", name: "name", type: "string", length: 255, required: true, isPrimary: false, autoIncrement: false, defaultValue: "", comment: "名称", relation: null },
          { id: "3", name: "description", type: "text", length: null, required: false, isPrimary: false, autoIncrement: false, defaultValue: "", comment: "描述", relation: null },
          { id: "4", name: "create_time", type: "datetime", length: null, required: false, isPrimary: false, autoIncrement: false, defaultValue: "CURRENT_TIMESTAMP", comment: "创建时间", relation: null },
          { id: "5", name: "update_time", type: "datetime", length: null, required: false, isPrimary: false, autoIncrement: false, defaultValue: "CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP", comment: "更新时间", relation: null }
        ]
      }

      // 更新当前表的字段信息
      currentTable.value.fields = fields

      console.log(`✅ 表字段信息加载成功，字段数量: ${fields.length}`)
      console.log("字段列表:", fields.map(f => ({ name: f.name, type: f.type, comment: f.comment })))
    }
  } catch (error) {
    console.error("加载表字段信息失败:", error)
  }
}

function getFieldTypeColor(type: string): string {
  const colorMap: Record<string, string> = {
    string: "primary",
    number: "success",
    boolean: "warning",
    date: "info",
    datetime: "info",
    text: "danger",
    json: "purple"
  }
  return colorMap[type] || "info"
}

function handleGoBack() {
  if (navigationPath.value.length > 1) {
    // 返回上一级关联表
    navigationPath.value.pop()
    const prevPath = navigationPath.value[navigationPath.value.length - 1]
    const prevTable = tables.value.find(t => t.id === prevPath.tableId)
    if (prevTable) {
      currentTable.value = prevTable
    }
  } else {
    // 返回表管理页面
    router.push("/api-generator/tables")
  }
}

function handleNavigateBack(index: number) {
  // 导航到指定层级
  navigationPath.value = navigationPath.value.slice(0, index + 1)
  const targetPath = navigationPath.value[index]
  const targetTable = tables.value.find(t => t.id === targetPath.tableId)
  if (targetTable) {
    currentTable.value = targetTable
  }
}

function handleAddField() {
  isEditField.value = false
  fieldDialogVisible.value = true
  resetFieldForm()
}

function handleEditField(field: TableField) {
  isEditField.value = true
  currentEditField.value = field
  fieldDialogVisible.value = true

  // 填充表单数据
  fieldForm.id = field.id
  fieldForm.name = field.name
  fieldForm.type = field.type
  fieldForm.length = field.length
  fieldForm.required = field.required
  fieldForm.isPrimary = field.isPrimary
  fieldForm.autoIncrement = field.autoIncrement
  fieldForm.defaultValue = field.defaultValue || ""
  fieldForm.comment = field.comment || ""
}

async function handleDeleteField(field: TableField) {
  try {
    await ElMessageBox.confirm(
      `确定要删除字段 "${field.name}" 吗？删除后不可恢复。`,
      "确认删除",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
    )

    if (currentTable.value) {
      const index = currentTable.value.fields.findIndex(f => f.id === field.id)
      if (index > -1) {
        currentTable.value.fields.splice(index, 1)
        ElMessage.success("删除成功")
      }
    }
  } catch {
    ElMessage.info("已取消删除")
  }
}

function handleConfigRelation(field: TableField) {
  currentEditField.value = field
  relationDialogVisible.value = true

  // 填充关联表单数据
  if (field.relation) {
    relationForm.enabled = field.relation.enabled
    relationForm.targetTableId = field.relation.targetTableId
    relationForm.targetTableName = field.relation.targetTableName
    relationForm.targetFieldId = field.relation.targetFieldId
    relationForm.targetFieldName = field.relation.targetFieldName
    relationForm.type = field.relation.type
  } else {
    resetRelationForm()
  }
}

function handleLinkToTable(field: TableField) {
  if (!field.relation?.enabled) return

  const targetTable = tables.value.find(t => t.id === field.relation!.targetTableId)
  if (targetTable) {
    // 添加到导航路径
    navigationPath.value.push({
      tableId: targetTable.id,
      tableName: targetTable.name,
      comment: targetTable.comment
    })

    // 切换到目标表
    currentTable.value = targetTable
    ElMessage.success(`已进入关联表: ${targetTable.comment}`)
  } else {
    ElMessage.error("未找到关联的目标表")
  }
}

function handleTargetTableChange(tableId: string) {
  const targetTable = tables.value.find(t => t.id === tableId)
  if (targetTable) {
    relationForm.targetTableName = targetTable.name
    relationForm.targetFieldId = ""
    relationForm.targetFieldName = ""
  }
}

function handleTargetFieldChange(fieldId: string) {
  const targetField = targetTableFields.value.find(f => f.id === fieldId)
  if (targetField) {
    relationForm.targetFieldName = targetField.name
  }
}

async function handleSubmitField() {
  try {
    await fieldFormRef.value?.validate()

    if (isEditField.value && currentEditField.value) {
      // 编辑字段
      Object.assign(currentEditField.value, {
        name: fieldForm.name,
        type: fieldForm.type,
        length: fieldForm.length,
        required: fieldForm.required,
        isPrimary: fieldForm.isPrimary,
        autoIncrement: fieldForm.autoIncrement,
        defaultValue: fieldForm.defaultValue,
        comment: fieldForm.comment
      })
      ElMessage.success("字段编辑成功")
    } else {
      // 新增字段
      const newField: TableField = {
        id: fieldForm.name,
        name: fieldForm.name,
        type: fieldForm.type,
        length: fieldForm.length,
        required: fieldForm.required,
        isPrimary: fieldForm.isPrimary,
        autoIncrement: fieldForm.autoIncrement,
        defaultValue: fieldForm.defaultValue,
        comment: fieldForm.comment
      }
      currentTable.value?.fields.push(newField)
      ElMessage.success("字段新增成功")
    }

    fieldDialogVisible.value = false
    resetFieldForm()
  } catch (error) {
    console.error("字段表单验证失败:", error)
  }
}

function handleSubmitRelation() {
  if (currentEditField.value) {
    if (relationForm.enabled) {
      const relation: FieldRelation = {
        targetTableId: relationForm.targetTableId,
        targetTableName: relationForm.targetTableName,
        targetFieldId: relationForm.targetFieldId,
        targetFieldName: relationForm.targetFieldName,
        type: relationForm.type,
        enabled: true
      }
      currentEditField.value.relation = relation
      ElMessage.success("关联配置成功")
    } else {
      currentEditField.value.relation = undefined
      ElMessage.success("关联已禁用")
    }

    relationDialogVisible.value = false
    resetRelationForm()
  }
}

function handleSaveConfig() {
  // 这里可以调用API保存配置
  ElMessage.success("配置保存成功")
}

function resetFieldForm() {
  fieldForm.id = ""
  fieldForm.name = ""
  fieldForm.type = "string"
  fieldForm.length = undefined
  fieldForm.required = false
  fieldForm.isPrimary = false
  fieldForm.autoIncrement = false
  fieldForm.defaultValue = ""
  fieldForm.comment = ""
  fieldFormRef.value?.clearValidate()
}

function resetRelationForm() {
  relationForm.enabled = false
  relationForm.targetTableId = ""
  relationForm.targetTableName = ""
  relationForm.targetFieldId = ""
  relationForm.targetFieldName = ""
  relationForm.type = "many-to-one"
}

// 生命周期
onMounted(() => {
  loadTables()
})
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.page-container {
  min-height: calc(100vh - 120px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-left h3 {
  margin: 0;
  color: #303133;
}

.header-right {
  display: flex;
  gap: 10px;
}

.breadcrumb-container {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.current-table {
  font-weight: 600;
  color: #409eff;
}

.relation-info {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.no-relation {
  color: #c0c4cc;
}

:deep(.el-breadcrumb__item:not(:last-child) .el-breadcrumb__inner) {
  color: #409eff;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #303133;
  font-weight: 600;
}

/* 弹出框样式隔离 */
:deep(.field-dialog .el-dialog__body) {
  padding: 20px;
}

:deep(.relation-dialog .el-dialog__body) {
  padding: 20px;
}

:deep(.field-dialog .el-form-item__label) {
  font-weight: 500;
}

:deep(.relation-dialog .el-form-item__label) {
  font-weight: 500;
}
</style>
